<template>
  <div id="search">
    <!-- 搜索电影 -->
    <div id="movie">
      <SearchMovie :three="three"></SearchMovie>
      <div class="bottom" v-show="searchlist.length" @click="showMovie">
        <h3>查看全部{{searchlist.length}}电影</h3>
      </div>
    </div>
  <!-- 搜索影院 -->
  <div id="address">
    <SearchCinema :cinema="cinema"></SearchCinema><br>
    <div class="bottom" v-show="address.length" @click="showcinema">
      <h3>查看全部{{address.length}}家影院</h3>
    </div>
  </div>
</div>
</template>

<script>
import SearchMovie from "../components/SearchList/SearchMovie.vue";
import SearchCinema from "../components/SearchList/SearchCinema.vue";
export default {
    name:'search',
    components:{SearchMovie,SearchCinema},
    created(){
      console.log('searchlist',this.three)
    },
    props:['searchlist','address'],
    data(){
        return {
          three:[],
          cinema:[]
        }
    },
    methods:{
      showMovie(){
        this.$router.push({name:'searchmovielist',params:{list:this.searchlist}})
        },
      showcinema(){
        this.$router.push({name:'searchcinemalist',params:{address:this.address}})
      }
    },
    watch:{
      searchlist(){
        this.three = this.searchlist.slice(0,3)
      },
      address(){
        this.cinema = this.address.slice(0,3)
      }
    }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
#search{
  height: 120vh;
}
.top{
  width: 100%;
  height: 20px;
  color: gray;
  font-weight: 700;
}
#search .bottom{
  width: 100%;
  height: 30px;
  color: red;
  text-align: center;
  border-top: 2px solid gray;
  border-bottom: 2px solid gray;
}

</style>